<template>
	<view :style="[addStyle(props.customStyle)]" :class="[customClass]" class="e-cell-group">
		<view v-if="props.title" class="e-cell-group__title">
			<slot name="title">
				<text class="e-cell-group__title__text">{{ props.title }}</text>
			</slot>
		</view>
		<view class="e-cell-group__wrapper">
			<e-line v-if="props.border"></e-line>
			<slot />
		</view>
	</view>
</template>

<script lang='ts'>
	import {
		defineComponent
	} from 'vue'
	import mpMixin from "../../libs/mixin/mpMixin";
	/**
	 * cellGroup  单元格
	 * @description cell单元格一般用于一组列表的情况，比如个人中心页，设置页等。
	 * @tutorial https://uviewui.com/components/cell.html
	 * 
	 * @property {String}	title		分组标题
	 * @property {Boolean}	border		是否显示外边框 (默认 true )
	 * @property {Object}	customStyle	定义需要用到的外部样式
	 * 
	 * @event {Function} click 	点击cell列表时触发
	 * @example <e-cell-group title="设置喜好">
	 */
	export default defineComponent({
		name: "e-cell-group",
		mixins: [mpMixin],
	});
</script>

<script lang="ts" setup>
	import {
		toRefs
	} from 'vue'
	import {
		cellGroupProps
	} from "./props";
	import {
		addStyle
	} from "../../libs/utils/_utils";
	import {
		useDefaultProps
	} from '../../libs/hooks'
	import componentsProps, {
		type DefaultProps
	} from "../../libs/config/componentsProps";

	const {
		cellGroup: cellGroupDefaultProps
	} = toRefs(componentsProps);

	const _props = defineProps(cellGroupProps)

	const props = useDefaultProps < DefaultProps['cellGroup'] > (_props, cellGroupDefaultProps);
</script>

<style lang="scss" scoped>
	@import "../../libs/theme/cell-group.scss";
</style>
